<template>
  <div class="area-balance-page">
    <el-row :gutter="20" class="page-header">
      <!-- 顶部标题栏 -->
      <span>区域平衡概览（{{ currentDate }}）</span>
      <el-button type="primary" @click="handleRefresh">刷新</el-button>
    </el-row>

    <el-row :gutter="20" class="main-content">
      <!-- 左侧：区域列表 - 使用响应式属性控制不同屏幕下的宽度 -->
      <el-col
          :xs="24"
          :sm="14"
      >
      <el-table
          :data="areaList"
          border
          style="width: 100%"
      >
        <!-- 表格内容保持不变 -->
        <el-table-column label="操作" width="80">
          <template #default="scope">
            <el-button size="small" type="text" @click="handleUpdate(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="areaCode" label="区域编码" />
        <el-table-column prop="areaName" label="区域名称" />
        <el-table-column prop="areaLevel" label="区域层级" />
        <el-table-column prop="waterValue" label="预估用水" />
        <el-table-column prop="remark" label="备注" />
        <el-table-column label="区域进出水表" width="140">
          <template #default="scope">
            <el-button
                size="small"
                type="primary"
                @click="handleFetchMeters(scope.row)"
            >设置进出水表</el-button>
          </template>
        </el-table-column>
      </el-table>
      </el-col>

      <!-- 右侧：区域进出水表 -->
      <el-col
          :xs="24"
          :sm="10"
      >
        <div class="right-header">
          <span>该区域内的进出水表</span>
          <el-button type="primary" @click="handleUpdateMeters">更新进出水</el-button>
        </div>
        <el-table :data="meterList" border style="width: 100%">
          <!-- 表格内容保持不变 -->
          <el-table-column prop="id" label="水表序号" />
          <el-table-column prop="serialNum" label="水表编码" />
          <el-table-column prop="elemName" label="水表名称" />
          <el-table-column prop="所辖楼栋" label="所辖楼栋" />
        </el-table>
      </el-col>
    </el-row>

    <!-- 引入区域编辑组件 -->
    <AreaEdit
        :init-form="form"
        :open="open"
        :title="title"
        @submit="handleSubmit"
        @close="cancel"
        @update:open="(val) => open = val"
    />
  </div>
</template>

<script setup>
// 脚本部分保持不变
import {ref, onMounted, computed, getCurrentInstance} from 'vue';
import { ElMessage } from 'element-plus';
import { listArea, getArea, delArea, addArea, updateArea } from "@/api/water/area"
import { listElement, getElement, delElement, addElement, updateElement } from "@/api/water/element.js"
import AreaEdit from "@/components/water/dialog/AreaEdit.vue";

// 状态定义
const currentDate = computed(() => {
  const date = new Date(Date.now());
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();

  return `${year}年${month}月${day}日`;
});
const areaList = ref([]); // 左侧区域列表数据
const selectedArea = ref(null); // 选中的区域
const meterList = ref([]); // 右侧水表列表数据
//区域编辑相关常量
const open = ref(false);
const title = ref("")
const form = ref({})
const { proxy } = getCurrentInstance()

// 初始化：加载区域列表
const loadAreaList = async () => {
  try {
    const res = await listArea({pageSize:100}); // 调用“查询区域列表”接口（无参数时传空对象或省略）
    console.log(res);
    if (res.code === 200) { // 假设接口返回格式为 { code, data }，需与后端一致
      areaList.value = res.rows;
    } else {
      ElMessage.error('获取区域列表失败');
    }
  } catch (error) {
    ElMessage.error('网络错误，获取区域列表失败');
    console.error(error);
  }
};

// 刷新按钮：重新加载区域列表
const handleRefresh = () => {
  loadAreaList();
};

/** 修改按钮操作 */
function handleUpdate(row) {
  const _id = row?.id || ids.value[0]
  getArea(_id).then(response => {
    form.value = response.data
    open.value = true
    title.value = "修改区域管理"
  })
}
/** 处理表单提交 */
function handleSubmit(formData) {
  if (formData.id != null) {
    updateArea(formData).then(response => {
      proxy.$modal.msgSuccess("修改成功")
      open.value = false
      loadAreaList();
    })
  } else {
    addArea(formData).then(response => {
      proxy.$modal.msgSuccess("新增成功")
      open.value = false
      loadAreaList();
    })
  }
}
// 取消按钮
function cancel() {
  open.value = false
  form.value = {}
}


// 行点击：选中区域并加载其水表
const handleRowSelect = (row) => {
  selectedArea.value = row;
  handleFetchMeters(row);
};

// “设置进出水表”：加载指定区域的水表数据
// 同时查询firstAreaId和negativeParentId等于areaId的水表数据并合并
const handleFetchMeters = async (area) => {
  selectedArea.value = area;
  try {
    // 从area中获取id，进行存在性校验
    if (!area?.id) {
      ElMessage.warning('未获取到有效的区域ID');
      meterList.value = [];
      return;
    }

    // 1. 查询firstAreaId等于areaId的数据
    const resFirst = await listElement({ firstAreaId: area.id, pageNum: 1, pageSize: 100 });
    // 2. 查询negativeParentId等于areaId的数据
    const resNegative = await listElement({ negativeAreaId: area.id, pageNum: 1, pageSize: 100 });

    // 3. 合并两个结果集，并去重（假设用水表id作为唯一标识）
    let firstMeters = resFirst.code === 200 ? resFirst.rows : [];
    let negativeMeters = resNegative.code === 200 ? resNegative.rows : [];

    // 创建一个Map用于去重
    const meterMap = new Map();

    // 添加firstAreaId匹配的水表
    firstMeters.forEach(meter => {
      meterMap.set(meter.id, meter);
    });

    // 添加negativeParentId匹配的水表（如果不存在则添加）
    negativeMeters.forEach(meter => {
        meterMap.set(meter.id, meter);
    });

    // 将Map的值转换为数组
    meterList.value = Array.from(meterMap.values());
    console.log("合并后的水表列表:", meterList.value);

  } catch (error) {
    ElMessage.error('网络错误，获取数据失败');
    console.error('查询数据异常：', error);
    meterList.value = [];
  }
};

// “更新进出水”：提交水表数据（需根据实际接口扩展）
const handleUpdateMeters = () => {
  if (!selectedArea.value) {
    ElMessage.warning('请先选择区域');
    return;
  }
  // 示例：构造提交数据（需与后端接口参数一致）
  const submitData = {
    areaId: selectedArea.value.id,
    meters: meterList.value,
  };
  // 调用“更新区域水表”接口（需自行扩展接口函数，如 updateAreaMeter）
  // updateAreaMeter(submitData).then(res => {
  //   if (res.code === 200) {
  //     ElMessage.success('更新成功');
  //   } else {
  //     ElMessage.error('更新失败');
  //   }
  // }).catch(err => {
  //   ElMessage.error('网络错误，更新失败');
  //   console.error(err);
  // });
  ElMessage.info('更新逻辑需根据实际接口扩展'); // 临时提示
};

// 组件挂载时加载初始数据
onMounted(() => {
  loadAreaList();
});
</script>

<style scoped>
.area-balance-page {
  padding: 16px;
  width: 100%;
  box-sizing: border-box; /* 确保padding不会增加总宽度 */
  min-height: 100vh;
}

.page-header {
  align-items: center;
  margin-bottom: 16px;
  display: flex;
}

.page-header span {
  font-size: 16px;
  font-weight: 500;
}

.main-content {
  width: 100%;
  box-sizing: border-box;
}

.right-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.empty-tip {
  text-align: center;
  padding: 32px 0;
  color: #909399;
}
</style>
